﻿@model NFine.Domain.Entity.ProductManage.ProductEntity
@{
    ViewBag.Title = "商品详情";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<style>
    .product-body {
        height: 100%;
        padding-left: 20px;
        margin-top: 10px;
    }

    .body-left {
        width: 600px;
        height: 100%;
        float: left;
    }

        .body-left img {
            width: 600px;
            height: 350px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
        }

        .body-left li {
            float: left;
            margin-right: 6px;
            list-style: none;
        }

            .body-left li img {
                width: 52px;
                height: 52px;
                cursor: pointer;
            }

    .body-content {
        margin-bottom: 20px;
    }

    .body-right {
        float: left;
        width:500px;
    }

    .tdTitle {
        height: 36px;
        font-weight: bold;
        color: #333;
        font-size: large;
    }

    .spanPrice {
        font-size: 20px;
        font-weight: bold;
        color: #f40;
        margin-top:20px;
    }

    .num {
        width: 50px;
        text-align: center;
        float: left;
        height: 30px;
    }

    .setnum {
        border: 1px solid rgb(169,169,169);
        display: block;
        width: 20px;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }
</style>

<div class="product-body">
    <div class="body-content">
        <div class="body-left">
            <div class="tb-booth tb-pic tb-s310">
                <img id="bigImg" src="@Model.F_ImageUrl" rel="@Model.F_ImageUrl" />
            </div>
            <ul id="showImg" style="padding-left:0px;">
                <li><img src="@Model.F_ImageUrl" rel="@Model.F_ImageUrl" /></li>
                @foreach (var img in Model.NotMapped_ImagesUrl)
                {
                    <li><img id="bigImg" src="@img" rel="@img" /></li>
                }
            </ul>
        </div>
        <div class="body-right" style="height:280px;position:relative;">
            <div class="tdTitle">@Model.F_ProductName</div>
            <div class="spanPrice">￥@Model.F_Price.Value.ToString("F2") </div>
            @*<div style="bottom:0px;position:absolute">
    <div>
        <lable style="float:left;line-height:30px">数量：</lable>
        <span class="setnum" style="border-right:none;float:left;" onclick="addProductCount(-1)">-</span>
        <input id="productCount" type="number" value="1" class="num" />
        <span class="setnum" style="border-left:none;float:left;" onclick="addProductCount(1)">+</span>
        <span style="margin-left:10px;"> <a class="layui-layer-btn0 btn btn-primary" style="width:90px">立即购买</a></span>
    </div>
            </div>*@
        </div>
    </div>
    <div style="clear:both;">
        @Html.Raw(Model.F_Description)
    </div>
</div>
<script>
    $("#showImg li").click(function () {
        $(this).find("img").addClass("active")
                   .end()
                   .siblings()
                   .find("img")
                   .removeClass("active");

        $("#bigImg").attr("src", $(this).find("img").attr("src"));
        $("#bigImg").attr('rel', $(this).find("img").attr("src"));
    });
    function addProductCount(count) {
        var curCount = $('#productCount').val();
        if (curCount == null || curCount == '')
            curCount = 1;

        var result = count + parseInt(curCount);
        if (result < 1) {
            result = 1;
        }
        $('#productCount').val(result);
    }

</script>
